<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">最新动态</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :rowNum="7" :config="config" style="width:100%;height:420px;cursor: pointer"
          ref="scrollBoard" @click="mapClick" />
      </div>
    </div>
  </div>
</template>

<script>
  import {
    platformDynamicPage
  } from '@/api/index'
  import handleGetData from '@/mixins/handleGetData'
  export default {
    mixins: [handleGetData],
    data() {
      return {
        areaId: '', //区域id
        config: {
          header: ['时间', '店铺名称', '最新动态'],

          rowNum: 6, //表格行数
          headerHeight: 35,
          headerBGC: '#0f1325', //表头
          oddRowBGC: '#0f1325', //奇数行
          evenRowBGC: '#171c33', //偶数行
          columnWidth: [50],
          align: ['center'],
          data: [
            // ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
            // ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
            // ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
            // ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
            // ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
            // ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
            // ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
            // ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
            // ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
            // ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
          ],

        },
        list:[],
        pageNum: 1,
        pageSize: 10,
      }
    },
    components: {},
    created() {

    },
    mounted() {
      this.areaId = localStorage.getItem('areaId')
      this.getData()
      this._handleData()
    },
    methods: {
      mapClick(row){
        // console.log(row.rowIndex)
        // console.log(this.list[row.rowIndex].merchantId)
        let shopName = this.list[row.rowIndex].shopName
        window.location = process.env.VUE_APP_GOV_API + '/merchants/MerchantsList?name=' + shopName;
        // window.location = 'http://192.168.0.112:9527/merchants/MerchantsList?name=' + shopName;
      },
      // 查询平台动态
      getData() {
        const params = {
          areaId: this.areaId
        };
        platformDynamicPage(params).then((res) => {
          console.log("查询平台动态", res)
          const data = res.result.records
          this.list = data
          if (res.code == 200) {
            var arrlist = []
            
            data.forEach((item) => {
              var arr = []

              // arr[item.shopName,item.createTime,item.businessContent] 
              arr[0] = item.createTime
              arr[1] = item.shopName
              arr[2] = item.businessContent
              arrlist.push(arr)
              this.config = {
                header: ['时间', '店铺名称', '最新动态'],

                rowNum: 7, //表格行数
                headerHeight: 35,
                headerBGC: '#0f1325', //表头
                oddRowBGC: '#0f1325', //奇数行
                evenRowBGC: '#171c33', //偶数行
                columnWidth: [170, 120, 150],
                align: ['center'],
                data: arrlist
              }
            });
          }
        })
      },

    }
  }
</script>

<style lang="scss" scoped>
  $box-height: 410px;
  $box-width: 450px;

  #centerRight1 {
    padding: 16px;
    padding-top: 20px;
    height: $box-height;
    width: $box-width;
    border-radius: 5px;

    .bg-color-black {
      height: $box-height - 30px;
      border-radius: 10px;
    }

    .text {
      color: #c3cbde;
      font-size: 18px;
    }

    .body-box {
      border-radius: 10px;
      overflow: hidden;

      .dv-scr-board {
        width: 270px;
        height: 340px;
      }
    }
  }
</style>